<template>
    <div>
        <div class="main">
            <van-field label="事故名称" v-model="form.AccidentName" name="AccidentName" type="textarea" autosize rows="1" readonly>
            </van-field>
            <van-field label="事故编号" v-model="form.AccidentNumber" name="AccidentNumber" readonly>
            </van-field>
            <van-field label="事故发生部门" v-model="form.AccidentDepartmentName" name="AccidentDepartmentName" readonly></van-field>
            <van-field label="事故日期" :value="form.AccidentDate|formatDateTime" readonly></van-field>
            <van-field label="事故简介" v-model="form.Remarks" type="textarea" rows="1" autosize readonly />
            <van-field label="立即采取的行动" v-model="form.TakeImmediateAction" type="textarea" rows="1" autosize readonly />
            <van-field class="input_text" name="radio" label="工艺分类">
                <template #input>
                    <van-radio-group v-model="form.ProcessClassification" direction="horizontal" style="padding-left: 8px;" disabled>
                        <van-radio name="A" style="margin: 0 10px 10px 0">工艺</van-radio>
                        <van-radio name="B" style="margin: 0 10px 10px 0">非工艺</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field class="input_text" name="radio" label="事故分类" v-if="form.ProcessClassification=='A'">
                <template #input>
                    <van-radio-group v-model="form.AttidentClassification" direction="horizontal" style="padding-left: 8px;" disabled>
                        <!-- <van-radio :name="item.ID" shape="square" v-for="(item, index) in form.AccidentProcessList" :key="index">{{ item.Name }}</van-radio> -->
                        <van-radio v-for="(item, index) in form.AccidentProcessList" :key="index" :name="item.ID" style="margin: 0 10px 10px 0">{{ item.Name }}</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field class="input_text" name="radio" label="事故分类" v-if="form.ProcessClassification=='B'">
                <template #input>
                    <van-radio-group v-model="form.AttidentClassification" direction="horizontal" style="padding-left: 8px;" disabled>
                        <!-- <van-radio :name="item.ID" shape="square" v-for="(item, index) in form.AccidentProcessList" :key="index">{{ item.Name }}</van-radio> -->
                        <van-radio v-for="(item, index) in form.AccidentFreeProcessList" :key="index" :name="item.ID" style="margin: 0 10px 10px 0" readonly>{{ item.Name }}</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field v-if="isShow(1)" class="input_text" name="checkboxGroup" label="伤害/职业病">
                <template #input v-if="isShow(1)">
                    <van-checkbox-group v-model="harmArr" direction="horizontal" disabled style="padding-left: 10px;">
                        <van-checkbox :name="item.ID" shape="square" v-for="(item, index) in form.HarmList" :key="index">{{ item.Name }}</van-checkbox>
                    </van-checkbox-group>
                </template>
            </van-field>
            <van-field v-if="isShow(2)" label="火灾爆炸涉及范围" v-model="form.InvolveScope" type="textarea" rows="1" autosize readonly></van-field>
            <van-field v-if="isShow(3)" label="环境污染范围" v-model="form.PolluteScope" type="textarea" rows="1" autosize readonly></van-field>
            <van-field v-if="isShow(4)" label="泄露物质" v-model="form.RevealMatter" type="textarea" rows="1" autosize readonly></van-field>
            <van-field v-if="isShow(4)" label="泄露量" v-model="form.Spillage" type="textarea" rows="1" autosize readonly></van-field>
            <van-field v-if="isShow(5)" label="生产异常影响范围" v-model="form.SphereInfluence" type="textarea" rows="1" autosize readonly></van-field>
            <van-field v-if="isShow(7)" label="直接财产损失" v-model="form.DirectPropertyLoss" type="textarea" rows="1" autosize readonly></van-field>
            <van-field class="input_text" name="radio" label="事故分级" v-if="form.ProcessClassification=='A' || form.ProcessClassification=='B'">
                <template #input disabled>
                    <van-radio-group v-model="form.AttidentgRading" direction="horizontal" disabled style="padding-left: 8px;">

                        <van-radio v-for="(item, index) in form.AttidentgRadingList" :key="index" :name="item.ID" style="margin: 0 10px 10px 0">{{ item.Name }}</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field class="input_text" name="radio" label="潜在风险">
                <template #input disabled>
                    <van-radio-group v-model="form.PotentialRisk" disabled direction="horizontal" style="padding-left: 8px;">
                        <van-radio v-for="(item, index) in form.PotentialRiskList" :key="index" :name="item.ID" style="margin: 0 10px 10px 0">{{ item.Name }}</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <van-field label="外部协助" v-model="form.ExternalAssistance" readonly type="textarea" rows="1" autosize />
            <div class="report-block">
                <van-list style="margin: 0px">
                    <van-cell style="margin-top: 0px;padding-left: 0px;" class="cell-item" v-for="(item, index) in form.AuditData" :key="index">
                        <van-row>
                            <van-col span="8" style="padding-left: 16px;text-align: left;color:#646566">
                                {{item.LevelName}}
                            </van-col>
                            <van-col span="16" style="padding-left: 10px;">
                                {{item.OperateContent}}
                            </van-col>
                        </van-row>
                    </van-cell>
                </van-list>
            </div>
            <FileUpload @CallBack="_fileUploadCb" :attachs="form.Attachs" :allowEdit="false" :labelName="'附件'" />
        </div>
    </div>
</template>

<script>
import FileUpload from "@/components/Attach/FileUpload";
import {
    InitNewEntity,
    GetView,
    getDangerDetail,
} from "@/api/WhAccidentInitialReport";
import { mapGetters } from "vuex";
export default {
    components: {
        FileUpload,
    },
    data() {
        return {
            form: {},
            edit: false,
        };
    },
    computed: {
        ...mapGetters(["baseUrl", "CompanyCode", "roles"]),
    },
    // watch() {},
    created() {
        let id = this.$route.query.id;
        if (id > 0) {
            this.GetView1(id);
        } else {
            this.InitNewEntity();
        }
    },
    methods: {
        isShow(value) {
            if (
                this.form.AttidentClassification &&
                this.form.AttidentClassification.indexOf(value) > -1 &&
                (value != "4" || this.form.ProcessClassification == "A") &&
                (value != "5" || this.form.ProcessClassification == "A") &&
                (value != "7" || this.form.ProcessClassification == "B")
            ) {
                return true;
            }
            return false;
        },
        _fileUploadCb(attachs) {
            this.form.Attachs = attachs;
        },
        InitNewEntity() {
            // var me = this;
            // const param = {
            //     id: 0,
            //     ctCode: this.ctCode || "",
            //     OriginType: this.data.OriginType,
            // };
            var param = null;
            InitNewEntity(param).then((res) => {
                this.form = res.data;
            });
        },
        GetView1(id) {
            const param = {
                id: id,
            };
            var _this = this;
            getDangerDetail(param).then((res) => {
                _this.form = res.data;
                if (res.data.Harm != null) {
                    _this.harmArr = res.data.Harm.split(",");
                }
                _this.edit = true;
            });
        },
    },
};
</script>

<style lang="less" scpoed>
.wrapper {
    display: flex;
    align-items: center;
    height: 100%;
}
.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
.report-block {
    background-color: #fff;
}
</style>
<style lang="less" scoped>
.space-between {
    justify-content: space-between;
}
</style>
